// //@import "mixin";

// $color-green: rgb(59, 201, 22);
// $color-pink: rgb(255, 102, 159);
// $color-blue: rgb(74, 171, 255);
// $color-yellow: rgb(255, 198, 102);
// $color-green-transparent: rgba(59, 201, 22, .5);
// $color-pink-transparent: rgba(255, 102, 159, .5);
// $color-blue-transparent: rgba(74, 171, 255, .5);
// $color-yellow-transparent: rgba(255, 198, 102, .5);

// $moves: (
//         (startX: 0, startY: 0, endX: 0, endY: 55, width: 6, height: 6, background: $color-green),
//         (startX: 0, startY: 0, endX: 15, endY: 60, width: 4, height: 4, background: $color-pink-transparent),
//         (startX: 0, startY: 0, endX: 35, endY: 45, width: 4, height: 4, background: $color-blue-transparent),
//         (startX: 0, startY: 0, endX: 50, endY: 25, width: 6, height: 6, background: $color-yellow),
//         (startX: 0, startY: 0, endX: 60, endY: 0, width: 2, height: 2, background: $color-pink-transparent),
//         (startX: 0, startY: 0, endX: 50, endY: -25, width: 6, height: 6, background: $color-blue),
//         (startX: 0, startY: 0, endX: 40, endY: -30, width: 3, height: 3, background: $color-green-transparent),
//         (startX: 0, startY: 0, endX: 20, endY: -55, width: 5, height: 5, background: $color-pink),
//         (startX: 0, startY: 0, endX: 5, endY: -45, width: 4, height: 4, background: $color-green-transparent),
//         (startX: 0, startY: 0, endX: -20, endY: -50, width: 2, height: 2, background: $color-pink-transparent),
//         (startX: 0, startY: 0, endX: -40, endY: -50, width: 2, height: 2, background: $color-green-transparent),
//         (startX: 0, startY: 0, endX: -55, endY: -30, width: 4, height: 4, background: $color-blue),
//         (startX: 0, startY: 0, endX: -55, endY: -10, width: 3, height: 3, background: $color-yellow-transparent),
//         (startX: 0, startY: 0, endX: -55, endY: -5, width: 3, height: 3, background: $color-green-transparent),
//         (startX: 0, startY: 0, endX: -35, endY: -7, width: 2, height: 2, background: $color-pink-transparent),
//         (startX: 0, startY: 0, endX: -45, endY: 10, width: 4, height: 4, background: $color-yellow-transparent),
//         (startX: 0, startY: 0, endX: -50, endY: 25, width: 6, height: 6, background: $color-pink),
//         (startX: 0, startY: 0, endX: -40, endY: 35, width: 4, height: 4, background: $color-green-transparent)
// );

// @mixin move($index) {
//   $item: nth($moves, $index);
//   $keyframesName: "move" + $index;
//   var(--animation-time): .75s;
//   var(--animation-type): linear;
//   $animationIterator: 1;
//   $width: map-get($item, width);
//   $height: map-get($item, height);
//   $backgroud: map-get($item, background);
//   $startX: map-get($item, startX);
//   $startY: map-get($item, startY);
//   $endX: map-get($item, endX);
//   $endY: map-get($item, endY);

//   width: px2rem($width);
//   height: px2rem($height);
//   background: $backgroud;
//   // animation: #{$keyframesName} var(--animation-time) var(--animation-type) $animationIterator;
//   @keyframes #{$keyframesName} {
//     0% {
//       transform: translate3d(px2rem($startX), px2rem($startY), 0) scale(0);
//       opacity: 0;
//     }
//     50% {
//       transform: translate3d(px2rem($endX * 0.5), px2rem($endY * 0.5), 0) scale(.5);
//       opacity: 1;
//     }
//     90% {
//       transform: translate3d(px2rem($endX), px2rem($endY), 0) scale(1);
//       opacity: 1;
//     }
//     100% {
//       transform: translate3d(px2rem($endX * 1.05), px2rem($endY * 1.05), 0) scale(1);
//       opacity: 0;
//     }
//   }
// }
